/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    FlatList,
    StyleSheet,
    View
} from 'react-native';
import Item from "./src/compents/Item";
import  movies from "./src/movies.json";
const styles = StyleSheet.create({
   root:{
     paddingHorizontal:15,
   },
});

const api= 'https://api.douban.com/v2/movie/top250';

export default class App extends Component {
    state={
        movies:[],
        refreshing:false,
    };
    refreshing = false;
    start = 0;
    count = 12;

    fetchLocalData = (start=0,count=12)=>{
        console.log(start+'   '+count);
        if (this.refreshing){
            return;
        }
        this.setState({
            refreshing:true,
        });
        this.refreshing = true;
        return Promise.resolve(movies).then(
            (json)=>{
                this.setState({
                    //movies:json.subjects,
                    refreshing:false,
                });
                this.refreshing = false;
                let arr = new Array();
                if (json && json.subjects.length>0){
                    let cou = (start+count)<20?(start+count):20;
                    let sub = json.subjects.slice(start,cou);
                    arr.subjects = sub;
                }
                return arr;
            }
        )
    };

    fetchData = (start=0,count=12)=>{
        console.log(start+'   '+count);
        if (this.refreshing){
           return;
        }
        this.setState({
            refreshing:true,
        });
        this.refreshing = true;
        return fetch(api+"?start="+start+"&count="+count)
            .then((response) => response.json())
            .then((json) => {
                this.setState({
                    //movies:json.subjects,
                    refreshing:false,
                });
                //this.refreshing = false;
                return json;
            })
            .catch((error) => {
                console.error(error);
            });
    };
    freshData = ()=>{
      console.log("freshData")
      this.fetchData().then((json)=>{
          this.start = this.count
          this.setState({
              movies:json.subjects,
          });
          this.refreshing = false;
      })
    };

    fetchMore = ()=>{
        console.log("fetchMore")
        this.fetchData(this.start,this.count).then((json)=>{
            if (json && json.subjects.length>0){
                // if (this.start>=20-this.count){
                //     this.start=20;
                // }else{
                //     this.start+=this.count;
                // }
                this.start+=this.count;
                this.setState({
                    movies:this.state.movies.concat(json.subjects),
                });
                this.refreshing = false;
            }
        })
    };
    componentDidMount() {
        this.fetchMore();
        // setTimeout(()=>{
        //         this.fetchData();
        //     },3000
        // )
    }

  render() {
    const {movies,refreshing} =  this.state;
    return (
        <View>
            <FlatList
                style={styles.root}
                numColumns="3"
                keyExtractor = {item =>item.id}
                data={movies}
                renderItem={
                     ({item})=><Item title={item.title} image={item.images.medium} stars = {item.rating.stars}/>
                 }
                onRefresh={this.freshData}
                refreshing={refreshing}
                onEndReached={this.fetchMore}
                onEndReachedThreshold={0.1}
            />
        </View>
    );
  }
}


